<template>
  <el-dialog
    v-model="visible"
    :title="title"
    width="400"
    draggable
    @close="close"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :z-index="2000"
  >
    <template #default>
      <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="80"
        label-position="top"
        @keydown.enter.stop
        @submit.prevent
      >
        <el-form-item v-if="handleType == 'review_opinion'" label="审核结果">
          <el-select
            v-model="form.status"
            collapse-tags
            placeholder="请选择"
            clearable
            @change="changeStatus"
            class="w-full"
          >
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          v-if="handleType == 'specified_operation_user'"
          label="指定运营人员"
        >
          <select-personnel
            class="w-full"
            v-model="form.specified_operation_user_id"
            placeholder="添加人"
          ></select-personnel>
        </el-form-item>
        <el-form-item v-if="handleType == 'recommended_quantity'" label="建议备货量">
          <el-input
            v-model="form.suggest_prepare_count"
            oninput="value=value.replace(/[^0-9]/g,'')"
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item v-if="handleType == 'check_remark'" label="审核备注">
          <el-input
            v-model="form.check_remark"
            placeholder="请输入"
            :rows="2"
            type="textarea"
          />
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" :loading="loading" @click="save(formRef)"
        >保 存</el-button
      >
    </template>
  </el-dialog>
</template>
<script setup name="OperationAuditBatch">
import { reactive, toRefs } from "vue";
import { ElMessage } from "element-plus";
import { statusOptions } from "../data.js";

const emits = defineEmits(["submit"]);

const statusMap = new Map([
  ["review_opinion", "批量修改审核结果"],
  ["specified_operation_user", "批量修改指定运营人员"],
  ["recommended_quantity", "批量修改备货量"],
  ["check_remark", "批量审核备注"],
]);

const data = reactive({
  form: {},
  visible: false,
  loading: false,
  formRef: null,
  title: "",
  handleType: "",
});
const { rules, form, visible, loading, formRef, title, handleType } = toRefs(data);
const open = (type) => {
  title.value = statusMap.get(type);
  handleType.value = type;
  visible.value = true;
};
const save = () => {
  if (handleType.value == "review_opinion" && !form.value.status) {
    ElMessage.error("请选择审核结果");
    return;
  }
  if (
    handleType.value == "specified_operation_user" &&
    !form.value.specified_operation_user_id
  ) {
    ElMessage.error("请选择制定运营人员");
    return;
  }
  if (handleType.value == "recommended_quantity" && !form.value.suggest_prepare_count) {
    ElMessage.error("请输入建议备货量");
    return;
  }

  if (handleType.value == "check_remark" && !form.value.check_remark) {
    ElMessage.error("请输入审核备注");
    return;
  }
  emits("submit", {
    type: handleType.value,
    ...form.value,
  });
  close();
};
const close = () => {
  form.value = {};
  visible.value = false;
};
defineExpose({ open });
</script>
